<template>
 <div>
    <!-- 表格标题 -->
    <h2>学生信息表</h2>
    <div class="modal-overlay" v-if= "showAddModal" >      
      <!-- 学生模态框 -->
      <div class="modal">
        <h3>添加学生信息</h3>
        <!-- {{ isadd? "添加学生信息" : "编辑学生信息" }} -->
        <div>
          <label >姓名：</label>
          <input v-model="addForm.name" type="text">      
          <!-- //与addForm对象的值互相绑定 -->
        </div>
        <div>
          <label >头像：</label>
          <input v-model="addForm.avater" type="text">
        </div>
        <div>
          <label >班级：</label>
          <input v-model="addForm.class" type="text">
        </div>
        <div>
          <label >出生年月：</label>
          <input v-model="addForm.birth" type="text">
        </div>
        <div>
          <button @click="confirmAdd">确认</button>     
          <!-- //确认上传 -->
          <button @click="showAddModal = false">取消</button>      
          <!-- //恢复表单显示 -->
        </div>

      </div>
    </div>
    <div class="modal-overlay" v-if="showEditModal">   
      <!-- //根据表达式的真假值来决定是否渲染一个元素 -->
      <div class="modal">
        <h3>编辑学生信息</h3>
        <div>
          <label >姓名：</label>
          <input v-model="editForm.name" type="text" />
        </div>
        <div>
          <label >头像URL：</label>
          <input  v-model="editForm.avater" type="text" />
        </div>
        <div>
          <label >班级：</label>
          <input v-model="editForm.class" type="text" />
        </div>
        <div>
          <label>出生年月：</label>
          <input v-model="editForm.birth"  type="month" />
        </div>
        <div>
          <button @click="confirmEdit">确认</button>
          <button @click="showEditModal = false">取消</button>
        </div>
      </div>
    </div>

    <!-- 或者不写两个模态框 写一个 用isadd条件判断编辑还是添加 -->

    

    <!-- 学生表格 -->
    <table border="1">
      <thead>
        <tr>
          <th>头像</th>
          <th>姓名</th>
          <th>班级</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(student,index) in studentList" :key="index">   .jpg
          <!-- v-for 遍历对象 -->
          <td>{{ student.name }}</td>
          <td>{{ student.class }}</td>
          <td>{{ student.birth }}</td>
          <td> <button @click="handleEdit(index)">编辑</button>
            <button @click="handleDelete(index)">删除</button>
            <button @click="handleAdd(index)">添加</button></td>
         
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup >
import StudentEdit from './StudentEdit.vue';
import { ref } from 'vue';
const studentList=ref([
  {
name:'张三',
avater: '',
class:'高三一班',
birth:'2008-09'
  },
    {
name:'李四',
avater: '',
class:'高三六班',
birth:'2006-07'
  },
    {
name:'王五',
avater: '',
class:'高三二班',
birth:'2008-05'
  },
]);

// const isadd = false;
const showEditModal=ref(false);
const editForm = ref({});
const currentEditIndex = ref(-1);

const showAddModal = ref(false) ;   
// 默认关闭
const addForm = ref({ // 添加表单数据
  name: '',
  avater: '',
  class: '',     //让值为空 若直接写addForm='' 会取消数据的双向绑定
  birth: ''
});

function handleEdit(index){
  
  showEditModal.value = true;
  editForm.value = JSON.parse(JSON.stringify(studentList.value[index]))  
  currentEditIndex.value = index
  
};

function confirmEdit(){
    studentList.value[currentEditIndex.value] = editForm.value;
    showEditModal.value = false;
    currentEditIndex.value = -1;
  }  

function handleDelete(index){
  if(confirm("确定删除")){
    studentList.value.splice(index,1);
  };
};

  function handleAdd(){
    showAddModal.value = true     //点击添加 显示模态单
    addForm.value = {
      name: '',
      avater: '',       //清空上一次添加的数据
      class: '',
      birth: ''
    }
  }
  function confirmAdd(){
   
    studentList.value.push({      
      // 确认 上传新的学生单的值 且使新值为input输入框中输入的addform的值
      name: addForm.value.name,   
      // push 添加一组新的数组值
      avater: addForm.value.avater,
      class: addForm.value.class,
      birth: addForm.value.birth,
    })
         showAddModal.value = false
  }
</script>

<style>
table {
  border-collapse: collapse;
  margin-top: 10px;
  width: 100%;
}

th, td {
  padding: 5px;
  text-align: center;
}

.modal-overlay {
  position: absolute;
  top: 50%;   
  left: 50%;   
  transform: translate(-50%, -50%); 
  z-index: 1;
}


.modal {
  background-color: white; 
  padding: 20px;
  border: 1px solid #ccc;
  width: 300px;
}
</style>